<template>
  <div class="container">
    <!-- <nav-bar title="收益" /> -->
    <div class="main">
      <div class="amount">
        <div class="dis">
          {{typeTitle}}
        </div>
        <h3 v-if="type===0"><i>¥</i>{{userBenefitDetail.NoSettlementAmount}}</h3>
        <h3 v-else><i>¥</i>{{userBenefitDetail.SettlementAmount}}</h3>
      </div>
    </div>
    <div class="list">
      <div v-for="(item, index) in benefitOrders" :key="index">
        <div class="item">
          <div class="income">
            <div class="price">
              <i>+</i>
              <span>¥{{item.BrokerageAmount}}</span>
            </div>
            <!-- <div class="time" v-if="item.Status === 1">
              已到账 {{item.OrderGetDate}}
            </div> -->
          </div>
          <div class="person">
            <img :src='"http://shop.jdpin.com.cn/"+item.Buyer.Photo' />
            <h3>{{item.Buyer.Name}}</h3>
            <span>下单时间 {{item.OrderDate}}</span>
          </div>
          <div class="detail">
            <div class="product" v-for="(itemIn, index) in item.Items" :key="index">
              <img :src='itemIn.ProductDefaultImage' />
              <p>{{itemIn.ProductName}}</p>
              <p>{{itemIn.Sku}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  getMyBenefit, 
  getMyBenefitOrders,
} from '../../network/belong'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      type: null,
      userBenefitDetail: {
        SettlementAmount: 0, // 累计收益 总结算收入
        Balance: 0, // 可提现
        WithdrawalsAmount: 0, // 已提现
        NoSettlementAmount: 0 // 待收益 未结算的佣金
      },
      benefitOrders: []
    }
  },
  computed: {
    typeTitle(){
      return this.type === 1 ? '累计收益' : '待收益'
    }
  },
  mounted() {
    this.type = this.$route.query.type
    this.getMyBenefit()
    this.getMyBenefitOrders()
  },
  methods: {
    getMyBenefit(){
      let requestData = {
        userkey: this.userKey
      }
      getMyBenefit(requestData, benefit => {
        this.userBenefitDetail = benefit
      })
    },
    getMyBenefitOrders(){
      getMyBenefitOrders(res => {
        res = res.filter(item => {
          if(this.type===1){ // 累计收益时只展示已提现订单
            return item.Status === this.type && item.IsWithdraw
          } else {
            return item.Status === this.type
          }
        })
        this.benefitOrders = res
      })
    },
  },
}
</script>

<style scoped>
.main{
  height: 90px;
  color: #ffffff;
  background-color: #000000;
}
.main .amount{
  display: inline-block;
  color: #ffffff;
  padding: 5px 25px 0 35px;
  text-align: right;
}
.main .amount h3{
  font-size: 18px;
  padding-top: 10px;
}
.main .amount .send{
  width: 100px;
  line-height: 30px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
  background-color: #646161;
}
.main .dis{
  padding: 15px 0 0 0;
  font-size: 12px;
}
.list .item{
  padding: 25px 25px 0 25px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.list .item .income{
  display: flex;
  padding-right: 20px;
  justify-content: space-between;
}
.list .item .income .price i{
  font-size: 14px;
  padding-right: 10px;
}
.list .item .income .price span{
  font-size: 18px;
}
.list .item .income .time{
  color: #ababab;
  font-size: 12px;
}
.list .item .person{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.list .item .person img{
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
}
.list .item .person h3{
  flex-grow: 1;
  color: #666666;
}
.list .item .person span{
  color: #ababab;
  font-size: 12px;
}
.list .item .detail .product{
  height: 70px;
  padding: 15px 20px 15px 0;
  border-bottom: 1px solid #f6f6f6;
  box-sizing: border-box;
}
.list .item .detail .product:last-child{
  border-bottom: none;
}
.list .item .detail .product img{
  float: left;
  margin-right: 15px;
  width: 40px;
  height: 40px;
}
.list .item .detail .product p{
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #666666;
}

</style>